<template>
  <div>
    <el-upload
      drag
      multiple
      name="file"
      :headers="uploadHeaders"
      :accept="fileType"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="checkFileType"
      :action="uploadUrl"
      :disabled="disabled"
    >
      <i class="el-icon-upload" style="font-size: 22px;margin: 0px;" />
      <span class="el-upload__text">将附件拖到此处，或<em>点击上传</em></span>
      <!-- <div slot="tip" class="el-upload__tip">仅支持上传xls, xlsx, pdf, zip, rar, jpg, png, gif文件</div> -->
    </el-upload>
    <el-alert
      :title="title"
      type="warning"
      class="mt10 mb20"
      show-icon
      style="width: 400px;padding: 0 12px;"
      :closable="false"
    />
  </div>

</template>
<script>
export default ({
  props: {
    uploadUrl: {
      type: String,
      default: ''
    },
    fileType: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      defult: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadHeaders: {
        Authorization: `Bearer ${JSON.parse(localStorage.info).access_token}`,
        timeout: 50000
      }
    }
  },
  methods: {
    /**
     * 文件类型判断
    */
    checkFileType(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.'))
      const typeList = ['.xls', '.xlsx', '.pdf', '.zip', '.rar', '.jpg', '.png', '.gif']
      if (!typeList.includes(fileType)) {
        this.$message({
          message: '上传失败，请检查文件类型',
          type: 'error'
        })
        return false
      }
    },
    /**
     * 上传
    */
    handleSuccess(res) {
      if (res.code === 0) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        // this.fileList.push({ name: res.data.fileName, url: res.data.enclosure })
        this.$emit('onUpload')
      } else {
        // this.$message({
        //   message: res.message,
        //   type: 'error'
        // })
        // this.fileList.pop()
        return this.$message.error(res.message)
      }
    },
    handleError() {
      this.$message({
        message: '上传失败，请重新上传',
        type: 'error'
      })
    }
  }
})
</script>
